﻿<%@ Page Title="" Language="C#" MasterPageFile="~/EasyUI.Master" AutoEventWireup="true" CodeBehind="Listmychart.aspx.cs" Inherits="jnlamp.Web.lampinfo.Listmychart" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <script src="../Script/export.js"></script>   
    <script src="../Script/highcharts.js"></script>  
    <script src="../Script/exporting.js"></script> 
    <script src="../Script/jnbase.js"></script>
    <script src="../Script/datetime.js"></script>
    <script type="text/javascript">
        var pt;
        var ptmark;
        var uid = "";
        var map;
        var gid = "";
        var city = "";
         var ply;//区域线        
        var jd = "";
        var wd = "";
        var gjd = "";
        var gwd = "";
        var gwid = "";
        var markerClusterer;
        var markers = [];
        var data_info;
        var ISOneRow = 0;
        var sprovince = "";
        var scity = "";
        var scounty = "";
        var se = ""; //镇
        var sebm = "";//镇的编码        
        var loc = "";//选择点的地址        
        var label;
        var wchartInstance;
        var myonechart;
        var mytwochart;
        $.extend($.fn.tree.methods, {
            getLevel: function (jq, target) {
                var l = $(target).parentsUntil("ul.tree", "ul");
                return l.length + 1;
            }
        });
        $(function () {
            Highcharts.setOptions({
                lang: {
                    contextButtonTitle: "图表导出菜单",
                    decimalPoint: ".",
                    downloadJPEG: "下载JPEG图片",
                    downloadPDF: "下载PDF文件",
                    downloadPNG: "下载PNG文件",
                    downloadSVG: "下载SVG文件",
                    drillUpText: "返回 {series.name}",
                    loading: "加载中",
                    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    noData: "没有数据",
                    numericSymbols: ["千", "兆", "G", "T", "P", "E"],
                    printChart: "打印图表",
                    resetZoom: "恢复缩放",
                    resetZoomTitle: "恢复图表",
                    shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    thousandsSep: ",",
                    weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六", "星期天"]
                }
            });
            InitTree();
            InitGird();
            
            InitSearch();
        });        
      
        //初始化表格
        function InitTree() {
            $('#pt').tree({
                width: '100%', //宽度                
                lines: true,
                //data: provincetree,   
                url: '../areainfo/GetArea.ashx', //请求数据的页面 
                method: 'post',
                queryParams: { "action": "querymyareauser" },
                onBeforeExpand: function (node) {
                    $("#pt").tree("options").queryParams = { "action": "queryyb" };
                    $('#pt').tree('options').url = "../areainfo/GetArea.ashx?pid=" + node.id;
                },
                onClick: function (node) {
                    sprovince = scity = scounty = se = "";
                    if (node.text != "") {
                        var lv = $('#pt').tree("getLevel", node.target);
                        if (lv == 2) {
                            sprovince = node.text;
                        }
                        else if (lv == 3) {
                            scity = node.text;
                            sprovince = $('#pt').tree("getParent", node.target).text;
                        }
                        else if (lv == 4) {
                            scounty = node.text;
                            var node1 = $('#pt').tree("getParent", node.target)
                            scity = node1.text;
                            sprovince = $('#pt').tree("getParent", node1.target).text;
                        }
                        else if (lv == 5) {

                            var node1 = $('#pt').tree("getParent", node.target);
                            scounty = node1.text;
                            var node2 = $('#pt').tree("getParent", node1.target);
                            scity = node2.text;
                            sprovince = $('#pt').tree("getParent", node2.target).text;
                            se = node.text;

                        }
                        sebm = node.bm;                        
                        reloadgrid();
                    }
                },
                onLoadSuccess: function (node, param) {
                    //reloadgrid();
                }
            });

        }

        function InitGird() {
            $('#tt').datagrid({
                title: '基地列表', //表格标题
                url: '../baseinfo/GetBase.ashx', //请求数据的页面
                sortName: 'basedate', //排序字段
                idField: 'bid', //标识字段,主键
                iconCls: '', //标题左边的图标
                width: '100%', //宽度
                //height: $(parent.document).find("#mainPanle").height() - 35 > 0 ? $(parent.document).find("#mainPanle").height() - 35 : 500, //高度
                nowrap: true, //是否换行，True 就会把数据显示在一行里
                striped: true, //True 奇偶行使用不同背景色
                collapsible: false, //可折叠
                singleSelect: true,
                sortOrder: 'desc', //排序类型
                remoteSort: true, //定义是否从服务器给数据排序
                fitColumns: false,
                method: 'post',
                columns: [[
                    { title: '基地名称', field: 'basename', width: 100 },
                    {
                        title: '创建日期', field: 'basedate', sortable: true, width: 90, formatter: function (value, row, index) {
                            if (value != "") {

                                if (value.indexOf("-") != -1)
                                    value = value.replace(/-/g, "/");
                                return new Date(value).pattern("yyyy年M月d日");
                            }
                        }
                    },
                    {
                        title: '灯浏览', field: 'a', width: 60, formatter: function (value, row, index) {
                            return '<a href="#" onclick="ISOneRow = 0;top.addTab(\'' + row.basename + '\',\'/lampinfo/showbase.aspx?bid=' + row.bid + '\', \'icon icon-magic\');">灯浏览</a>';

                        }
                    },
                    { title: '项目', field: 'proname', width: 80 },
                    { title: '地址', field: 'address', width: 150 },

                    { title: '备注', field: 'basemark', width: 150 }
                ]],
                onClickRow: function (rowIndex, rowData) {
                    if (ISOneRow == 1) {
                        //showmap(rowData.bid);
                        showlamp(rowData.bid);
                    }
                    else {
                        ISOneRow = 1;
                    }

                },
                onLoadSuccess: function (data) {
                    //根据所有基地加载网关与灯
                    var baseids = "";
                    $.each(data.rows, function (k, v) {
                        if (baseids.length > 0)
                            baseids = baseids + "," + v["bid"];
                        else {
                            baseids = v["bid"];
                        }
                    });
                    if(baseids!="")
                    showlamp(baseids);

                },
                toolbar: "#tab_toolbar",
                queryParams: { "action": "querymy", "sebm": sebm },
                pagination: true, //是否开启分页
                pageList: [10, 20, 30, 40, 50],
                pageNumber: 1, //默认索引页
                pageSize: 20, //默认一页数据条数
                rownumbers: true //行号
            });
            $('#tt').datagrid('getPager').pagination({
                layout: ['list', 'prev', 'next', 'refresh']
            });
        }
        function showlamp(baseids) {
            $.ajax({
                type: "post",
                dataType: "json",
                url: "/lampinfo/GetScd.ashx?action=queryb&bid=" + baseids,
                success: function aa(data) {
                    var info = "";
                    info = "共有灯" + data.total + "台。";
                    var sl = [];
                    var zc = [];
                    var state = "";
                    var mname = "";
                    var slnum = 0;
                    var zcnum = 0;
                    var zcname = "";
                    $.each(data.rows, function (k, v) {
                        state = v["lampstatus"];
                        mname = v["mname"];
                        if (!sl[mname])
                        {
                            sl[mname] = 0;
                        }
                        if (!zc[mname]) {
                            zc[mname] = 0;
                        }
                        if (state == '3' || state == '' || state == '2') {
                            slnum = slnum + 1;
                            sl[mname] = sl[mname] + 1;
                        }
                        else {
                            zcnum = zcnum + 1;
                            zc[mname] = zc[mname] + 1;
                        }

                    });
                    InitBar(sl, zc);
                }
            });
        }             
        function getQueryParams(queryParams) {
            if (sebm != "")
                queryParams.sebm = sebm;
            return queryParams;

        }
        //增加查询参数，重新加载表格  
        function reloadgrid() {

            //查询参数直接添加在queryParams中      
            var queryParams = $('#tt').datagrid('options').queryParams;
            getQueryParams(queryParams);
            $('#tt').datagrid('options').queryParams = queryParams;
            $("#tt").datagrid('reload');

        }
        //初始化搜索框
        function InitSearch() {
            $("#ipt_search").searchbox({
                width: 150,
                //iconCls: 'icon-save',
                searcher: function (val, name) {
                    $('#tt').datagrid('options').queryParams.search_type = name;
                    $('#tt').datagrid('options').queryParams.search_value = val;
                    $('#tt').datagrid('reload');
                },
                prompt: '请输入查询信息'
            });
        }
        function InitBar(sl,zc)
        {
            var s = "[";            
            for (var key in sl) {
                if (sl.hasOwnProperty(key)) {
                    s = s + "'" + key + "',";                    
                }
            }
            s = s.substr(0, s.length - 1);
            s = s + "]";
            wchartInstance = new Highcharts.Chart({
                chart: {
                    renderTo: 'mychartbar',
                    type: 'column'
                },
                title: {
                    text: '杀虫灯厂商设备分析'
                },
                subtitle: {
                    text: '正常-损坏比'
                },
                xAxis: {
                    categories: eval(s),
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '个数'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '正常',
                    data: []
                }, {
                    name: '损坏',
                    data: []
                }]
            });
            var t1 = "";
            var t2 = "";
            for (var key in sl) {
                if (sl.hasOwnProperty(key)) {
                    if (t1 != "")
                        t1 = t1 + "," + zc[key];
                    else
                        t1 = zc[key];
                    if (t2 != "")
                        t2 = t2 + "," + sl[key];
                    else
                        t2 = sl[key];
                }
            }            
            t1 = "[" + t1 + "]";
            t2 = "[" + t2 + "]";
            wchartInstance.series[0].setData(eval(t1));
            wchartInstance.series[1].setData(eval(t2));

            myonechart = new Highcharts.Chart({
                chart: {
                    renderTo: 'myonechart',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '正常灯各厂商所占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f} %</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>:{point.y}个'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '灯个数',
                    data: [                        
                    ]
                }]
            });


            mytwochart = new Highcharts.Chart({
                chart: {
                    renderTo: 'mytwochart',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: '损坏灯各厂商所占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f} %</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>:{point.y}个'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '灯个数',
                    data: [
                    ]
                }]
            });


            t1 = "";
            t2 = "";
            for (var key in sl) {
                if (sl.hasOwnProperty(key)) {
                    if (t1 != "")
                        t1 = t1 + "," + "['" + key + "'," + zc[key] + "]";
                    else
                        t1 = "['"+key+"',"+zc[key]+"]";
                    if (t2 != "")
                        t2 = t2 + "," + "['" + key + "'," + sl[key] + "]";
                    else
                        t2 = "['" + key + "'," + sl[key] + "]";
                }
            }
            t1 = "[" + t1 + "]";
            t2 = "[" + t2 + "]";
            myonechart.series[0].setData(eval(t1));
            mytwochart.series[0].setData(eval(t2));

        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="easyui-layout" style="width: 100%; height: 100%;">
        <div region="west" id="west" split="true" title="区域检索" style="width: 180px; overflow: scroll">
            <ul id="pt"></ul>
        </div>
        <div region="center" style="background: #eee; overflow: auto">
            <div class="easyui-layout" data-options="fit:true">
                <%-- <div region="north" split="true" style="height:50px; overflow:auto">
                     <span id="myinfo" style="line-height:20px;">灯信息</span>
                     </div>--%>
                <div region="west" split="true" style="width:350px; overflow: auto">
                    <table id="tt">
                    </table>
                    <div id="tab_toolbar" style="padding: 4px;">
                        <table cellpadding="0" cellspacing="0" style="width: 100%">
                            <tr>                           
                                <td style="text-align: left; padding-right: 15px">
                                    <input id="ipt_search" menu="#search_menu" />
                                    <div id="search_menu" style="width: 220px">
                                        <div name="usernum">
                                            基地名称
                                        </div>
                                        <div name="username">
                                            项目名称
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div region="center" style="background: #eee; overflow: auto;">
                    <div class="easyui-layout" style="width: 100%; height: 100%;">
                         <div region="north" split="true" style="height:250px; overflow: auto">
                             <table style="height:100%; width:100%;">
                                 <tr>
                                     <td height="50%" width="50%">
                                         <div id="myonechart" style="height:100%; width:100%;">

                             </div>
                                     </td>
                                     <td height="50%" width="50%">
                                         <div id="mytwochart" style="height:100%; width:100%;">

                             </div>

                                     </td>
                                 </tr>
                             </table>
                             
                             
                             </div>
                        <div region="center" style="background: #eee; overflow: auto;">
                            <div id="mychartbar" style="height:100%; width:100%;"></div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
</asp:Content>
